<script setup>
import Son1Pinia from "./components/Son1-pinia.vue";
import Son2Pinia from "./components/Son2-pinia.vue";
import { useCounterStore } from "./store/counter";
import { useChannelsStore } from "./store/channels";
import { storeToRefs } from "pinia";
const counter = useCounterStore();
const channelsStore = useChannelsStore();

// 解构 数据 用storeToRefs 保持响应式
const { count, message } = storeToRefs(counter);

// 解构方法
const { getList } = channelsStore


</script>

<template>
  <div>
    <h1>我是app---{{ counter.count }}我是app--{{ counter.message }}</h1>
    <h1>我是app解构---{{ count }}我是app--{{ message }}</h1>

    <Son1Pinia></Son1Pinia>
    <Son2Pinia></Son2Pinia>
    <h2>我是getter {{ counter.compCount }}</h2>
  </div>
  <button @click="getList">获取频道数据</button>
  <ul>
    <li v-for="item in channelsStore.channelsList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<style scoped></style>
